@layer base {
    :root {
        --background0: #fff;
        --background1: #ddd;
        --background2: #bbb;
        --background3: #999;

        --foreground0: #000;
        --foreground1: #444;
        --foreground2: #888;

        --font-size: 16px;
        --line-height: 1.3;

        --font-weight-bold: 700;
        --font-weight-normal: 400;
        --font-family: monospace;

        --box-border-color: var(--foreground0);
        --table-border-color: var(--box-border-color);
        --separator-color: var(--box-border-color);
        --separator-background: transparent;
    }

    [data-webtui-theme='dark'] {
        --background0: #000;
        --background1: #222;
        --background2: #444;
        --background3: #666;

        --foreground0: #fff;
        --foreground1: #ccc;
        --foreground2: #999;
    }

    body,
    html {
        background-color: var(--background0);
        color: var(--foreground0);
        font-family: var(--font-family);
        font-size: var(--font-size);
        font-weight: var(--font-weight-normal);
        line-height: var(--line-height, 1.5);
        font-variant-ligatures: common-ligatures;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        outline: none;
    }
}
